<!--
 * @Descripttion: 价格设置弹框
 * @version: v1.0.0
 * @Author: wang pingqi
 * @Date: 2021-04-23 14:13:05
 * @LastEditors: wang pingqi
 * @LastEditTime: 2022-04-29 14:40:12
-->
<template>
  <KiFormDialog
    :show.sync="form.show"
    :loading="form.loading"
    title="价格设置"
    v-model="formData"
    class="form-dialog"
    width="40%"
    :submit="handleDialogSubmit"
    @close="reset"
  >
    <template #el-form>
      <!-- <div>form.data={{form.data}}</div> -->
      <el-form-item label="开始日期" prop="beginDate" verify>
        <el-date-picker
          v-model="formData.beginDate"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择开始日期"
          style="width: 100%"
          :picker-options="pickerOptions.beginDate"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item label="结束日期" prop="endDate" verify>
        <el-date-picker
          v-model="formData.endDate"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择结束日期"
          style="width: 100%"
          :picker-options="pickerOptions.endDate"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item
        label="价格"
        prop="salePrice"
        :verify="{ type: 'int',  gt: 0 , lt: 100000 }"
      >
        <el-input
          placeholder="请输入价格"
          v-model="formData.salePrice"
          style="width: 100%"
        >
          <template slot="prepend">¥</template>
          <template slot="append">/ 晚</template>
        </el-input>
      </el-form-item>
      <el-form-item
        label="库存"
        prop="inventory"
        :verify="{ type: 'int', gte: 0, lte: 999}"
      >
        <el-input
          placeholder="请输入库存"
          v-model="formData.inventory"
          style="width: 100%"
        >
        </el-input>
      </el-form-item>
    </template>
  </KiFormDialog>
</template>

<script>
const dateRangeNode = {
  getTargetTime(t, day) {
    let d = t.split(" ")[0],
      h = t.split(" ")[1],
      date = new Date();
    date.setFullYear(d.split("-")[0]);
    date.setMonth(d.split("-")[1] - 1);
    date.setDate(parseInt(d.split("-")[2]) + day);
    return date.getTime();
  },
  getNextTime(day) {
    let date = new Date();
    date.setDate(date.getDate() + day);
    return date.getTime();
  },
};
export default {
  props: {
    form: {
      type: Object,
      required: true,
      default() {
        return {
          show: false,
          data: null,
          loading: false,
        };
      },
    },
  },
  data() {
    return {
      // 表单数据
      formData: {},
      pickerOptions: {
        beginDate: {
          disabledDate: (time, start, end) => {
            if (this.formData.endDate) {
              let tt = time.getTime();
              return (
                tt > dateRangeNode.getTargetTime(this.formData.endDate, 0) ||
                tt < dateRangeNode.getNextTime(-1)
              );
            } else {
              // return time.getTime() < Date.now() - 24 * 60 * 60 * 1000
              return time.getTime() < dateRangeNode.getNextTime(-1);
            }
          },
        },
        endDate: {
          disabledDate: (time, start, end) => {
            if (this.formData.beginDate) {
              return (
                time.getTime() <
                  dateRangeNode.getTargetTime(this.formData.beginDate, -1) ||
                time.getTime() >
                  dateRangeNode.getTargetTime(this.formData.beginDate, 90)
              );
            } else {
              // return time.getTime() < Date.now() - 24 * 60 * 60 * 1000
              return time.getTime() < dateRangeNode.getNextTime(-1);
            }
          },
        },
      },
    };
  },
  watch: {
    "form.data": {
      handler (nv, ov) {
        if (nv) {
          this.formData = nv;
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    /**
     * 清除验证和数据
     * @return Void
     */
    reset() {
      this.$refs.rowForm && this.$refs.rowForm.clearValidate();
      this.formData = {};
    },
    /**
     * 确认按钮提交
     * @return Void
     */
    handleDialogSubmit() {
      const _data = this.form.data;
      this.formData.inventory=parseInt(this.formData.inventory)
      this.formData.salePrice=Number(this.formData.salePrice)
      const params = {
        ...this.formData,
        hotelId : _data.hotelId,
        roomId  : _data.roomId,
        id : this.formData.id ? this.formData.id : new Date().getTime()
      };
      
      this.$emit("change",params)
    }
  },
};
</script>

<style lang="scss" scoped>
.form-dialog {
  .dialog-wrap {
    padding: 28px 28px 0;
  }
}
</style>